/*basic styling*/

* {
  box-sizing: border-box;
}
body {
    background-image: url(https://gifcity.carrd.co/assets/images/gallery69/4728476d.gif?v=20a350bf);
} 

@font-face {
	font-family: jersey10;
	src: url(Jersey10.woff2);
}

/*text stuff*/
p {
    text-align: left;
    font-family: jersey10;
    color: black;
    font-size: 17px;
}
h2 {
    text-align: center;
    font-family: jersey10;
    color: black;
    font-size: 27px;
}

a:link, a:visited {
  color: black;
  font-family: jersey10;
  padding: 5px;
  text-align: center;
  display: inline-block;
}

a:hover, a:active {
  background: rgba(255, 255, 255, 0.5);
}

header {
    padding: 0%;
}

table {
  font-family: jersey10;
  border-collapse: collapse;
  width: 100%;
}

th, td  {
  text-align: center;
  font-size: 17px;
  color: black;
  margin: auto;
  border-bottom: 1px solid black;
  padding-top: 10px;
}

/* class styling */

div.container {
     display: flex;
     background-color: white;
     margin-left: 300px;
     margin-right: 300px;
     border-radius: 20px;
}

div.contained {
     flex: 82%;
}

div.buttons {
    padding: 10px;
}

div.textbody {
    padding-right: 100px;
    padding-left: 20px;
}

div.charcontain {
    flex: auto;
    padding: 5px;
}

div.char {
  padding: 1px;
}

div.charimg {
  flex: wrap;
  padding: 20px;
}

div.charinfo {
  padding: 0px;
}


/*contained*/
@media only screen and (min-width: 1200px) {
  div.char {
    flex: 50%;
    max-width: 20%;
  }
}
@media only screen and (max-width: 768px) {
  div.char {
    flex: 70%;
    max-width: 70%;
  }
}
@media only screen and (max-width: 600px) {
  div.char {
    flex: 100%;
    max-width: 100%;
  }
}



/*container*/
@media only screen and (max-width: 1200px) {
  div.container {
    flex-direction: row;
    margin-left: 250px;
    margin-right: 250px;
  }
}
@media only screen and (max-width: 768px) {
  div.container {
    flex-direction: column;
    margin-left: 10px;
    margin-right: 10px;
  }
}
@media only screen and (max-width: 600px) {
  div.container {
    flex-direction: column;
    margin-left: 5px;
    margin-right: 5px;
  }
}